<template>
  <div class="contact-info">
    <el-card class="info-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <h3>联系方式</h3>
        </div>
      </template>
      
      <div class="info-list">
        <div class="info-item">
          <el-icon><Location /></el-icon>
          <div class="item-content">
            <h4>公司地址</h4>
            <p>{{ contactInfo.address }}</p>
          </div>
        </div>
        
        <div class="info-item">
          <el-icon><Phone /></el-icon>
          <div class="item-content">
            <h4>联系电话</h4>
            <p>{{ contactInfo.phone }}</p>
          </div>
        </div>
        
        <div class="info-item">
          <el-icon><Message /></el-icon>
          <div class="item-content">
            <h4>电子邮箱</h4>
            <p>{{ contactInfo.email }}</p>
          </div>
        </div>
        
        <div class="info-item">
          <el-icon><Clock /></el-icon>
          <div class="item-content">
            <h4>工作时间</h4>
            <p>{{ contactInfo.workingHours }}</p>
          </div>
        </div>
      </div>
      
      <div class="map-container">
        <div id="company-map" class="map"></div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { Location, Phone, Message, Clock } from '@element-plus/icons-vue'
import { getCompanyInfo } from '@/api/about'

const contactInfo = ref({
  address: '陕西省西安市高新区',
  phone: '029-88888888',
  email: 'contact@example.com',
  workingHours: '周一至周五 9:00-18:00'
})

let map = null

const initMap = () => {
  // 创建地图实例
  map = new AMap.Map('company-map', {
    zoom: 15,
    center: [108.860036, 34.194414], // 更新为公司实际坐标
    viewMode: '2D'
  })

  // 添加标记点
  const marker = new AMap.Marker({
    position: [108.860036, 34.194414],
    title: '西安力望电子科技有限公司'
  })

  map.add(marker)

  // 使用AMap.plugin方法加载控件
  AMap.plugin([
    'AMap.Scale',
    'AMap.ToolBar'
  ], function() {
    // 添加比例尺控件
    map.addControl(new AMap.Scale({
      position: 'LB'
    }))
    // 添加工具条控件
    map.addControl(new AMap.ToolBar({
      position: 'RB'
    }))
  })
}

const fetchContactInfo = async () => {
  try {
    const res = await getCompanyInfo()
    if (res.data) {
      contactInfo.value = { 
        ...contactInfo.value, 
        address: res.data.address,
        phone: res.data.phone,
        email: res.data.email
      }
    }
  } catch (error) {
    console.error('获取联系信息失败:', error)
  }
}

onMounted(() => {
  fetchContactInfo()
  // 等待DOM更新后初始化地图
  setTimeout(() => {
    initMap()
  }, 500)
})

onUnmounted(() => {
  // 销毁地图实例
  if (map) {
    map.destroy()
  }
})
</script>

<style lang="scss" scoped>
.contact-info {
  height: 100%;
  
  .info-card {
    background: #fff;
    border: none;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    }
    
    .card-header {
      padding: 25px;
      border-bottom: 1px solid #f0f2f5;
      
      h3 {
        margin: 0;
        font-size: 24px;
        font-weight: 600;
        color: #2c3e50;
        position: relative;
        padding-left: 15px;
        
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 4px;
          height: 20px;
          background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
          border-radius: 2px;
        }
      }
    }

    .info-list {
      padding: 25px;
      margin-bottom: 0;
      flex: 1;

      .info-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 20px;
        padding: 15px;
        border-radius: 15px;
        background-color: #f8f9fa;
        transition: all 0.3s ease;
        border: 2px solid transparent;

        &:hover {
          transform: translateY(-5px);
          background: #fff;
          border-color: rgba(76, 175, 80, 0.1);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        }

        &:last-child {
          margin-bottom: 0;
        }

        .el-icon {
          font-size: 24px;
          color: #4CAF50;
          margin-right: 15px;
          margin-top: 3px;
          transition: all 0.3s ease;
        }

        .item-content {
          flex: 1;
          
          h4 {
            margin: 0 0 5px;
            font-size: 16px;
            font-weight: 600;
            color: #2c3e50;
          }

          p {
            margin: 0;
            color: #606266;
            font-size: 14px;
            line-height: 1.6;
          }
        }
      }
    }

    .map-container {
      height: 300px;
      overflow: hidden;
      border-top: 1px solid #f0f2f5;
      
      .map {
        width: 100%;
        height: 100%;
      }
    }
  }
  
  @media (max-width: 768px) {
    .info-card {
      .card-header {
        padding: 20px;
        
        h3 {
          font-size: 20px;
        }
      }
      
      .info-list {
        padding: 20px;
        
        .info-item {
          padding: 12px;
          margin-bottom: 15px;
          
          .el-icon {
            font-size: 20px;
            margin-right: 12px;
          }
          
          .item-content {
            h4 {
              font-size: 15px;
              margin-bottom: 4px;
            }
            
            p {
              font-size: 13px;
            }
          }
        }
      }
      
      .map-container {
        height: 250px;
      }
    }
  }
}
</style> 